<template>
	<view v-if="visible" class="house-picker">
		<view class="main" v-if="dataSource.length">
			<scroll-view scroll-y="true" :lower-threshold="1">
				<view class="scroll-view-item" v-for="(v, i) in dataSource" :key="i" @tap.stop="tapItem(v)">{{ v.projectName }}</view>
			</scroll-view>
		</view>
		<view class="add" @click.stop="add">
			<uni-icons type="plus" size="16" color="#f39800"></uni-icons>
			<text>添加房屋</text>
		</view>
	</view>
</template>

<script>
	import http from '@/common/request.js';
	import {
		getCommonShareInfo
	} from '@/common/utils.js';
	import { mapState } from 'vuex';
	import uniIcons from '../../components/uni-icons/uni-icons.vue';
	export default {
		onShareAppMessage() {
			return getCommonShareInfo()
		},
		name: 'HouseSelect',
		components: {
			uniIcons
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			dataSource: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				// list: []
			};
		},
		computed: {
			getSelected(v) {
				if (this.value) {
					this.value.houseId === v.houseId ? ['selected'] : [];
				} else {
					return [];
				}
			},
			...mapState({ userInfo: state => state.userInfo, location: state => state.location, currentHouse: state => state.currentHouse })
		},
		methods: {
			add() {
				this.$emit('addHouse');
				this.$emit('update:visible', false);
			},
			tapItem(val) {
				this.edit(val)
				this.$store.commit('UPDATE_CURRENTHOUSE', val);
				this.$emit('selectHouse', val);
				this.$emit('update:visible', false);
			},
			edit(val) {
				http('/api/cusCityInfo/saveCityByProjectId?projectId=' + val.id, {
					data: {},
					method: 'GET'
				}).then(
					result => {
						console.log('----------result', result)
					}
				);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.house-picker {
		font-size: 28rpx;
		transition: all 0.5s;

		.main {
			flex: 1;
			position: relative;

			scroll-view {
				height: 100%;

				.scroll-view-item {
					padding: 20rpx 24rpx;
					position: relative;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 26rpx;

					&::after {
						content: '';
						position: absolute;
						left: 20rpx;
						right: 20rpx;
						bottom: 0;
						height: 2rpx;
						background-color: #eee;
						transform: scaleY(0.5);
					}

					&.selected {
						background: rgba($uni-color-primary, 0.1);
					}
				}

				.isBottom {
					display: flex;
					justify-content: center;
					color: #777;
					position: relative;
					font-size: 24rpx;

					&::after {
						content: '';
						position: absolute;
						bottom: 10rpx;
						width: 60rpx;
						height: 4rpx;
						left: 50%;
						transform: translateX(-51%);
						background: #777;
					}
				}
			}
		}

		.add {
			white-space: nowrap;
			padding: 20rpx 14rpx;
			text-align: center;
			color: rgb(243, 152, 0);
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
	}
</style>
